<template>
  <div class="">
    <el-card class="box-card">
      <el-form label-width="150px" :model="formLabelAlign">
        <el-form-item label="秒杀订单超过：">
          <el-input
            v-model="formLabelAlign.flashOrderOvertime"
            placeholder="Please input"
          >
            <template #append>分</template>
          </el-input>
          <span class="span-right">未付款，订单自动关闭</span>
        </el-form-item>
        <el-form-item label="正常订单超过：">
          <el-input
            v-model="formLabelAlign.normalOrderOvertime"
            placeholder="Please input"
          >
            <template #append>分</template>
          </el-input>
          <span class="span-right">未付款，订单自动关闭</span>
        </el-form-item>
        <el-form-item label="发货超过：">
          <el-input
            v-model="formLabelAlign.confirmOvertime"
            placeholder="Please input"
          >
            <template #append>天</template>
          </el-input>
          <span class="span-right">未收货，订单自动完成</span>
        </el-form-item>
        <el-form-item label="订单完成超过：">
          <el-input
            v-model="formLabelAlign.finishOvertime"
            placeholder="Please input"
          >
            <template #append>天</template>
          </el-input>
          <span class="span-right">自动结束交易，不能申请售后</span>
        </el-form-item>
        <el-form-item label="订单完成超过：">
          <el-input
            v-model="formLabelAlign.commentOvertime"
            placeholder="Please input"
          >
            <template #append>天</template>
          </el-input>
          <span class="span-right">自动五星好评</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="large" @click="submitFn"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import * as order from "@/request/modules/order";
import { ElMessage, ElMessageBox } from "element-plus";
import useTable from "@/hooks/useTable";

const formLabelAlign = ref({
  commentOvertime: 0,
  confirmOvertime: 0,
  finishOvertime: 0,
  flashOrderOvertime: 0,
  id: 1,
  normalOrderOvertime: 0,
});
// 获取指定订单设置
order.APIOrderSetting(formLabelAlign.value.id).then((res) => {
  // console.log(res);
  formLabelAlign.value = res.data;
});
//订单更新设置
function submitFn() {
  ElMessageBox.confirm("是否要提交修改?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    order.APIOrderSettingUpdate(formLabelAlign.value).then((res) => {
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "修改成功",
        });
      }
    });
  });
}
</script>

<style scoped>
.box-card {
  width: 800px;
  margin: auto;
  padding: 35px;
  box-sizing: border-box;
}

.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}

.el-form-item__content:after,
.el-form-item__content:before {
  display: table;
  content: "";
}

:deep(.el-form) {
  width: 100%;
}

:deep(.el-input) {
  width: 300px;
}

:deep(.el-input__inner) {
  width: 300px;
}

:deep(.el-input__wrapper) {
  width: 100px;
  height: 40px;
}

.span-right {
  margin-left: 20px;
}
</style>
